﻿<template>
  <div class="order-list-header">
    <!-- 租赁类型筛选 -->
    <div class="rental-type-filter">
      <el-radio-group v-model="rentalType" @change="handleRentalTypeChange">
        <el-radio-button label="all">全部租赁</el-radio-button>
        <el-radio-button label="personal">个人租赁</el-radio-button>
        <el-radio-button label="enterprise">企业租赁</el-radio-button>
      </el-radio-group>
    </div>

    <!-- 右侧操作区域 -->
    <div class="operation-area">
      <!-- 接单开关 -->
      <div class="order-switch">
        <span class="switch-label">
          接单开关
          <el-tooltip content="开启后可以接收新订单" placement="top">
            <base-icon color="var(--ct3)" name="iconfont ic-wenhaobangzhu" />
          </el-tooltip>
        </span>
        :
        <el-switch v-model="orderSwitchEnabled" @change="handleOrderSwitchChange" :active-color="'var(--bd)'" />
      </div>

      <!-- 营业时间设置 -->
      <div class="business-hours">
        <el-link type="primary" @click="handleSetBusinessHours">设置营业时间</el-link>
      </div>
      <el-divider direction="vertical" />
      <!-- 营业状态 -->
      <div class="business-status">
        <div
          class="status-badge"
          :class="{
            'status-ing': businessStatus === 'open',
            'status-warning': businessStatus === 'closed',
            'status-error': businessStatus === 'error',
          }"
        >
          <div class="status-dot"></div>
          <span class="status-text">{{ getStatusText(businessStatus) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, computed, onMounted } from "vue";
  import { ElMessage } from "element-plus";

  // 定义 props
  const props = defineProps({
    // 可以接收外部传入的初始状态
    initialRentalType: {
      type: String,
      default: "all",
    },
    initialOrderSwitch: {
      type: Boolean,
      default: true,
    },
  });

  // 定义 emits
  const emit = defineEmits(["rental-type-change", "order-switch-change", "set-business-hours"]);

  // 响应式数据
  const rentalType = ref(props.initialRentalType);
  const orderSwitchEnabled = ref(props.initialOrderSwitch);

  // 计算属性 - 营业状态
  const businessStatus = computed(() => {
    // 这里可以根据实际业务逻辑判断营业状态
    // 比如根据当前时间、营业时间设置等
    if (!orderSwitchEnabled.value) {
      return "closed"; // 接单开关关闭
    }

    // 可以根据其他条件判断状态
    // 比如营业时间、系统状态等
    const currentHour = new Date().getHours();
    if (currentHour >= 9 && currentHour < 18) {
      return "open"; // 营业中
    } else {
      return "error"; // 非营业时间
    }
  });

  // 获取状态文本
  const getStatusText = status => {
    const statusMap = {
      open: "营业中",
      closed: "已打烊",
      error: "非营业时间",
    };
    return statusMap[status] || "未知状态";
  };

  // 方法
  const handleRentalTypeChange = value => {
    console.log("租赁类型切换:", value);
    emit("rental-type-change", value);
  };

  const handleOrderSwitchChange = value => {
    console.log("接单开关切换:", value);
    emit("order-switch-change", value);

    // 显示提示信息
    if (value) {
      ElMessage.success("接单开关已开启");
    } else {
      ElMessage.warning("接单开关已关闭");
    }
  };

  const handleSetBusinessHours = () => {
    console.log("设置营业时间");
    emit("set-business-hours");

    // 这里可以打开营业时间设置弹窗
    ElMessage.info("打开营业时间设置");
  };

  // 生命周期
  onMounted(() => {
    console.log("订单列表头部组件已挂载");
  });
</script>

<style lang="scss" scoped>
  .order-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 16px;
  }

  .rental-type-filter {
    display: flex;
    align-items: center;
  }

  .operation-area {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .order-switch {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .switch-label {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 14px;
    color: var(--ct1);
  }

  .business-hours {
    .el-link {
      font-size: 14px;
    }
  }

  .business-status {
    .status-badge {
      display: flex;
      align-items: center;
      padding: 2px 6px;
      gap: 4px;
      border-radius: 4px;
      font-size: 12px;
      transition: all 0.3s ease;

      .status-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        flex-shrink: 0;
      }

      .status-text {
        white-space: nowrap;
      }
    }

    .status-ing {
      background-color: var(--sc9);
      border: 1px solid var(--sc8);
      color: var(--sc);

      .status-dot {
        background-color: var(--sc);
      }
    }

    .status-warning {
      background-color: var(--wr9);
      border: 1px solid var(--wr8);
      color: var(--wr);

      .status-dot {
        background-color: var(--wr);
      }
    }

    .status-error {
      background-color: var(--dr9);
      border: 1px solid var(--dr8);
      color: var(--dr);

      .status-dot {
        background-color: var(--dr);
      }
    }
  }
</style>
